<style>
    #topic-select-detail {
        padding: 20px 25px 25px 0;
    }

    .layui-form-label {
        width: 140px;
    }

    .layui-input-block {
        margin-left: 170px;
    }

    #topic-select-detail span {
        margin: 0 0 2px 3px !important;
    }

    .layui-layer-page .layui-layer-content {
        overflow: visible !important;
    }
</style>
<div class="layui-fluid" id="topic-select-detail">
    <form class="layui-form" lay-filter="topic-select-detail-form">
        <div class="layui-form-item website-hide">
            <label class="layui-form-label">id：</label>
            <div class="layui-input-block">
                <input type="text" name="selectId" data-th-value="${topicSelect.selectId}">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label">征集年份：</label>
                <div class="layui-input-block">
                    <input type="text" name="year" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label">课题名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="topicName" readonly class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label">学科分类：</label>
                <div class="layui-input-block">
                    <input type="text" name="subjectTypeCodes" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label">建议单位名称：</label>
                <div class="layui-input-block">
                    <input type="text" name="unitName" readonly class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md6">
                <label class="layui-form-label">建议人姓名：</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-col-md6">
                <label class="layui-form-label">座机：</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" readonly class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md12">
                <label class="layui-form-label">手机号：</label>
                <div class="layui-input-block">
                    <input type="text" name="mobile" readonly class="layui-input">
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-md4">
                <label class="layui-form-label">职务：</label>
                <div class="layui-input-block">
                    <input type="text" name="position" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label">职称：</label>
                <div class="layui-input-block">
                    <input type="text" name="professionCode" readonly class="layui-input">
                </div>
            </div>
            <div class="layui-col-md4">
                <label class="layui-form-label">职称级别：</label>
                <div class="layui-input-block">
                    <input type="text" name="academic" readonly class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <label class="layui-form-label">建议立项依据摘要：</label>
                    <div class="layui-input-block">
                        <textarea name="content" placeholder="请输入内容" class="layui-textarea"
                                  th:text="${topicSelect.proveContent}"
                                  rows="10"></textarea>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

<script data-th-inline="javascript">
    layui.use(['form', 'formSelects', 'dict'], function () {
        var $ = layui.$,
            formSelects = layui.formSelects,
            form = layui.form,
            dict = layui.dict,
            topicSelect = [[${topicSelect}]]
        ;
        form.render();
        initFormValue();
        formSelects.render();

        function initFormValue() {
            let typeName = "";
            let dictList = dict.getByCodes(topicSelect.subjectTypeCodes);
            if (dictList) {
                for (var item of dictList) {
                    typeName += item.name + " ";
                }
            }
            let academic = "";
            let academicDict = dict.getByCode(topicSelect.academic);
            if (academicDict) {
                academic = academicDict.name;
            }

            let position = "";
            let positionDict = dict.getByCode(topicSelect.position);
            if (positionDict) {
                position = positionDict.name;
            }


            form.val("topic-select-detail-form", {
                "selectId": topicSelect.selectId,
                "subjectTypeCodes": typeName,
                "topicName": topicSelect.topicName,
                "year": topicSelect.year,
                "unitName": topicSelect.unitName,
                "userName": topicSelect.userName,
                "professionCode": topicSelect.professionCode,
                "academic": academic,
                "position": position,
                "phone": topicSelect.phone,
                "mobile": topicSelect.mobile,
            });
        }
    });
</script>